<template>
  <div v-drag v-show="isAttributeShow" class="attribute">
    <div class="u-main">
      <div class="attributeSearchForm">
        <el-table
          v-loading="loading"
          :data="attributeTableData"
          style="width: 100%"
          height="244"
          header-row-class-name="headRowClass"
          @row-click="tableRowClick($event)"
        >
          <el-table-column
            v-for="(field,index) in fields"
            :key="index"
            :prop="field.k"
            :label="field.v"
            show-overflow-tooltip
          />
        </el-table>
      </div>
      <i class="tab-pane-header-btn el-icon-close" @click="closeAttributeTable"/>
    </div>
    <div class="u-foot">
      <div class="device-filter-toolbar">
        <span class="device-filter-label">
          <b>筛选:</b>
        </span>
        <el-select v-model="queryField" class="query-select" size="mini" placeholder="请选择">
          <el-option v-for="(field,index) in fields" :key="index" :label="field.v" :value="field.k"/>
        </el-select>
        <el-input
          v-model="query"
          :disabled="queryField===''"
          class="filter"
          size="mini"
          placeholder="关键字搜索"
          clearable
          @keyup.enter.native="filtersQuery"
        />
      </div>
      <div style="float:right">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          :pager-count="5"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  name: 'Index',

  directives: {
    drag: {
      // 指令的定义
      bind: function(el) {
        const odiv = el // 获取当前元素
        odiv.onmousedown = e => {
          // 算出鼠标相对元素的位置
          const disX = e.clientX - odiv.offsetLeft
          const disY = e.clientY - odiv.offsetTop

          document.onmousemove = e => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            const left = e.clientX - disX
            const top = e.clientY - disY
            // 移动当前元素
            odiv.style.left = left + 'px'
            odiv.style.top = top + 'px'
          }
          document.onmouseup = e => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
  },
  data() {
    return {
      currentPage: 1, // 初始页
      pageSize: 10, // 每页的数据
      loading: false, // 加载等待框
      query: '', // 查询条件
      queryField: '', // 查询字段
      total: 0 // 总记录数
    }
  },
  methods: {
    /**
     * 更改页数
     * @param size
     */
    handleSizeChange(size) {
      this.pageSize = size
      this.requestData()
    },
    /**
     * 翻页
     * @param currentPage
     */
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.requestData()
    },
    /**
     * 过滤条件
     * @param data
     * @param index
     * @param array
     * @returns {boolean}
     */
    filtersQuery() {
      this.requestData()
    },

    /**
     * 点击表格
     * @param $event
     */
    tableRowClick($event) {
      const f = $event._feature
      this.mapService.flyTo(f.geometry)
      this.mapService.setHightLihgtFilter(this.currentSearchLayer._id, f.id || f.properties.ID)
    },
    /**
     * 关闭属性表并清除高亮
     */
    closeAttributeTable() {
      this.$store.commit('amap/setIsShowAttribute', false)
      this.mapService.clearHightLightFilter(this.currentSearchLayer._id)
    },
    /**
     * 请求数据
     */
    requestData() {
      this.loading = true
      this.$store.dispatch('amap/QueryLayerAttributes', {
          layer: this.currentSearchLayer,
          start: (this.currentPage - 1) * this.pageSize,
          size: this.pageSize,
          sql: [this.query, this.queryField]// this.query === "" ? '1=1' : this.queryField + " LIKE '%" + this.query + "%'"
        })
        .then(res => {
          this.loading = false
          this.total = res.total
        })
        .catch(e => {
          this.loading = false
        })
    }
  },
  computed: {
    ...mapState({
      /**
       * 当前查询自定义图层
       * @param state
       * @returns {currentSearchLayer|(function(*))|*}
       */
      currentSearchLayer(state) {
        return state.amap.currentSearchLayer
      },
      /**
       * 显示属性表并查询数据
       * @param state
       * @returns {*}
       */
      isAttributeShow(state) {
        return state.amap.isShowAttribute
      },
      /**
       * 组织properties数据
       * @param state
       * @returns {any[]}
       */
      attributeTableData(state) {
        return state.amap.attributeTableData.map(o => {
          o.properties._feature = o
          return o.properties
        })
      },
      /**
       * 查询图层的请求回来要素集合
       * @param state
       * @returns {attributeTableData|(function(*): any[])|Array|*}
       */
      attributeFeature(state) {
        return state.amap.attributeTableData
      },
      /**
       * 地图服务类
       */
      mapService(state) {
        return state.amap.mapServiceRight
      }
    }),
    /**
     * 属性字典
     * @returns {*}
     */
    fields() {
      const attributes = this.currentSearchLayer
        ? this.currentSearchLayer.attribute
        : ''
      if (attributes) {
        try {
          let array = []
          if (attributes === '') {
            array = []
          } else {
            const a = JSON.parse(attributes)
            for (const k in a) {
              array.push({ k: k, v: a[k] })
            }
          }
           return array
        } catch (e) {
          console.warn('属性字段解析出错!' + e)
        }
      }
      return []
    }
  },
  watch: {
    isAttributeShow: function(n, o) {
      if (n) {
        this.currentPage = 1;
        this.requestData()
      }
    }
  }
}
</script>

<style scoped>
.attribute {
  position: absolute;
  bottom: 20px;
  right: 8%;
  z-index: 999;
  width: 65%;
  height: 280px;
  /* color:#000; */
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 15px 15px rgba(0, 0, 0, 0.22);
}

.attribute .attributeCloseBtn {
  margin-top: 0px;
}
.attribute .headRowClass th {
  background-color: #1885c6;
}

.attribute .u-main {
  height: 244px;
  background-color: rgba(255, 255, 255, 1);
}

.attribute .u-foot {
  height: 35px;
  background: #1885c6;
}

.attribute .el-table td,
.el-table th {
  padding: 5px 0;
}

.attribute .el-table td {
  color: #000;
}

.attribute  .el-input__inner {
  height: 30px;
  border-radius: 0px;

}

.attribute .el-button {
  margin-top: 4px;
  padding: 2px 2px;
}

.attribute .filter {
  width: 150px;
}

.attribute .attributeSearcForm {
  float: right;
  margin-right: 10px;
}

.attribute .el-form-item {
  margin-bottom: 0px;
}

.attribute .headRowClass {
   color: #fff;
  line-height: 10px;
}
.attribute .headRowClass th {
  background-color: #1885c6;
}
.attribute .tab-pane-header-btn {
  position: absolute;
  right: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #f44336;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
  cursor: pointer;
}

.attribute .tab-pane-header-btn {
  position: absolute;
  right: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #f44336;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
}

.attribute .tab-pane-header-btn:hover {
  cursor: pointer;
}

.attribute .device-filter-toolbar {
  display: inline-block;
  margin-top: 2px;
  margin-left: 10px;
}

.attribute .device-filter-label {
  color: #fff;
  font-size: 14px;
}

.attribute .el-pagination .el-select .el-input .el-input__inner {
  border-radius: 0px;
  height: 30px;
}

.attribute .el-table__footer-wrapper, .el-table__header-wrapper {
  overflow: hidden;
  background: #1885c6;
}


</style>
